<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- v-if/ v-else-if / v-else判断 -->
    <!-- 其实这种使用不是推荐，那么复杂的逻辑在界面上，不好控制，一旦代码很多的时候，阅读性会很差，把这个判断写成一个方式或者在计算属性都是可以的，结合实际业务使用 -->
    <div v-if="type === 'A'">
        A
    </div>
    <!-- v-else-if的使用必须要有v-if -->
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            type: 'B',
        }
    });
</script>
</html>
